<template>
  <div>
    <cusDialog ref="dialog" width="25%" title="消息模板" headCss="float:left;" confrimText="新增" @hideHandler="hideHandler"
      @confrim="confrimHandler">
      <el-form ref="messageFormRef" :rules="rules" :model="messageForm" label-width="80px">

        <el-form-item label="消息类型" prop="msgType">
          <el-select v-model="messageForm.msgType" placeholder="请选择消息类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板ID" prop="templateID">
          <el-input v-model.trim="messageForm.templateID" clearable placeholder="请输入模板ID">
          </el-input>
        </el-form-item>
        <el-form-item label="AppID" prop="AppID">
          <el-input v-model="messageForm.AppID" placeholder="请输入AppID"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="messageForm.header" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="messageForm.content" :rows="4" placeholder="请输入内容">
          </el-input>
        </el-form-item>
        <el-form-item label="所属行业">
          <el-input v-model="messageForm.tissuesname" placeholder="请输入所属行业"></el-input>
        </el-form-item>
      </el-form>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
const router = useRouter();

// 人员初始化数据
const formOrigin = () => ({
  msgType: "", //消息类型
  templateID: "", // 模板ID
  AppID: "",
  header: "",
  content: "",
  tissuesname: "",
});

const messageForm = ref(formOrigin());
const messageFormRef = ref(null);
const title = ref("添加设备");
const rules = reactive<FormRules>({
  msgType: { required: true, message: "此项必填", trigger: "blur" },
  templateID: { required: true, message: "此项必填", trigger: "blur" },
  AppID: { required: true, message: "此项必填", trigger: "blur" },
});

const dialog = ref(null);
// 展示对话框
const showHandler = (tit: string) => {
  title.value = tit;
  dialog.value.show = true;
};
// 对话框关闭重置初始数据
const hideHandler = () => {
  messageForm.value = formOrigin();
  messageFormRef.value.resetFields();
};
const confrimHandler = () => {
  messageFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
defineExpose({ showHandler });
</script>

<style lang="scss" scoped>
.lableBox {
  //styleName: 中文简体R/H8;
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
</style>